// 商品详情页
const infoBox = document.querySelector(".box2")
const gouNum = document.querySelector(".box>.gouwudai>span")
const gouwudai = document.querySelector(".box>.gouwudai")
// 拿到商品页面的id
const id_ele = window.localStorage.getItem("data")
const data = JSON.parse(id_ele)
const id = window.localStorage.getItem("id")
const number = window.localStorage.getItem("number")
console.log(number);
// 跳转购物车

numBer()
function numBer(){
    let span_ele = gouNum.innerText
    gouNum.innerText= number  
// 点击购物袋跳转购物车
    gouwudai.addEventListener("click",function(){
        window.location.href="../html/cart.html"
    })

}




// 渲染页面

getGoodsInfo()
function getGoodsInfo() {
    let str = ``
    str += `
    <div class="imgs">
    <img src="${data[3]}" alt="">
    <div class="show"></div>
    </div>
    
    <div class="big">
    <img src="${data[3]}" alt="">
    </div>
        <div class="a1">
            <p class="p1">${data[1]}</p>
            <p class="p2">Face Symbol Radiant and Brightening Mask Set</p>
            <p class="p3">水润提亮肤色，修护屏障，</p>
            <p class="p4">价格<span>￥${data[6]}</span></p>
            <p class="p5">规格<span>25mlX20pics</span></p>
            <button>加入购物车</button>
        </div>
    `
    infoBox.innerHTML = str


   
}
// 放大镜

function Enlarge() {
    this.imgs = document.querySelector(".box2>.imgs")
    this.show = document.querySelector(".box2>.imgs>.show")
    this.big = document.querySelector(".box2>.big")
    this.big_img = this.big.querySelector("img")
    // console.log(this.big_img);
    // console.log(this.show);
    //   拿到imgs的盒子的宽度高度
    this.imgs_width = this.imgs.offsetWidth
    this.imgs_height = this.imgs.offsetHeight
    // console.log(this.imgs_width,this.imgs_height);
    //拿到big盒子宽高
    // 默认是隐藏的， 拿不到宽高， 用飞航内样式
    this.big_width = parseInt(window.getComputedStyle(this.big).width)
    this.big_width = parseInt(window.getComputedStyle(this.big).width)
    // console.log(this.big_width,this.big_height)

}
// 显示隐藏
Enlarge.prototype.overOut = function () {
    this.imgs.addEventListener("mouseenter", () => {
        this.show.style.display = "block"
        this.big.style.display = "block"
    })
    this.imgs.addEventListener("mouseleave", () => {
        this.show.style.display = "none"
        this.big.style.display = "none"
    })
}
// 计算比例
Enlarge.prototype.setScale = function () {
    this.show_width = this.imgs_width * this.big_width / 600
    this.show_height = this.imgs_height * this.big_height / 600
    // console.log(this.show_width,this.show_height); 
    this.show.style.width = this.show_width + "px"
    this.show.style.height = this.show_height + "px"
}
// 跟随移动
Enlarge.prototype.move = function () {
    this.imgs.addEventListener("mousemove", (evt) => {
        let e = evt || event
        let x = e.offsetX - this.show.clientWidth / 2
        let y = e.offsetY - this.show.clientHeight / 2
        if (x <= 0) x = 0
        if (y <= 0) y = 0
        if (x >= this.imgs.clientWidth - this.show.clientWidth) x = this.imgs.clientWidth - this.show.clientWidth
        if (y >= this.imgs.clientHeight - this.show.clientHeight) y = this.imgs.clientHeight - this.show.clientHeight
        this.show.style.left = x + "px"
        this.show.style.top = y + "px"
        let bg_x = 600 / this.imgs_width * x
        let bg_y = 600 / this.imgs_height * y
        this.big_img.style.left = -bg_x + "px"
        this.big_img.style.top= -bg_y + "px"
    })
}

let a = new Enlarge()
console.log(a)
a.overOut()
a.setScale()
a.move()




// 点击跳转
infoBox.addEventListener("click", function (evt) {
    const e = evt || event
    const target = e.target || e.srcElement
    e.preventDefault()
    if (target.tagName === "BUTTON") {
        if(!id)return alert("请返回登陆")
        const cartList = JSON.parse(window.localStorage.getItem('cart')) || []
        // console.log(cartList);
        // 判断 cartList 数组中是否又你需要添加的这一条数据
        const res = cartList.find(item => item[0] === data[0])
        if (res) {
            res[res.length - 1] += 1
        } else {
            data[data.length] = 1
            cartList.push(data)
        }

        window.localStorage.setItem('cart', JSON.stringify(cartList))
        window.location.href = './cart.html'
    }
})